<template>
    <a-layout-content style="padding: 0 50px; margin: 50px 0">
        <a-layout style="padding: 24px 0; background: #fff">
            <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
                <!--                渲染数据s              -->
                <p>
                    <a-form layout="inline" :model="param">
                        <a-form-item>
                            <a-input v-model:value="param.name" placeholder="名称">
                            </a-input>
                        </a-form-item>
                        <a-form-item>
                            <a-button type="primary" @click="handleQuery({page: 1, size: pagination.pageSize})">
                                查询
                            </a-button>
                        </a-form-item>
                        <a-form-item>
                            <a-button type="primary" @click="add()">
                                新增
                            </a-button>
                        </a-form-item>
                    </a-form>
                </p>
                <a-table
                    :columns="columns"
                    :row-key="record => record.id"
                    :data-source="ebooks"
                    :pagination="pagination"
                    :loading="loading"
                    @change="handleTableChange">

                    <template #cover="{ text : cover }">
                        <img  width="151" height="151"  v-if="cover" :src="cover" />
                    </template>

                    <template v-slot:category="{ text : record }">
                      <span>{{getCategoryName(record.category1Id)}} / {{getCategoryName(record.category2Id)}}</span>
                    </template>

                    <template v-slot:action="{ text : record }">
                        <a-space size="small">

                            <router-link  :to="'/admin/doc?ebookId='+record.id">
                                <a-button type="primary">
                                    文档管理
                                </a-button>
                            </router-link>

                            <a-button type="primary" @click="edit(record)">
                                编辑
                            </a-button>
                            <a-popconfirm
                                    title="是否删除?"
                                    ok-text="Yes"
                                    cancel-text="No"
                                    @confirm="Bdelete(record)"
                            >
                                <a-button type="danger" >
                                    删除
                                </a-button>
                            </a-popconfirm>

                        </a-space>
                    </template>
<!--                    <template v-slot:category="{ text, record }">-->
<!--                        <span>{{ getCategoryName(record.category1Id) }} / {{ getCategoryName(record.category2Id) }}</span>-->
<!--                    </template>-->
<!--                    <template v-slot:action="{ text, record }">-->
<!--                        <a-space size="small">-->
<!--                            <router-link :to="'/admin/doc?ebookId=' + record.id">-->
<!--                                <a-button type="primary">-->
<!--                                    文档管理-->
<!--                                </a-button>-->
<!--                            </router-link>-->
<!--                            <a-button type="primary" @click="edit(record)">-->
<!--                                编辑-->
<!--                            </a-button>-->
<!--                            <a-popconfirm-->
<!--                                    title="删除后不可恢复，确认删除?"-->
<!--                                    ok-text="是"-->
<!--                                    cancel-text="否"-->
<!--                                    @confirm="handleDelete(record.id)"-->
<!--                            >-->
<!--                                <a-button type="danger">-->
<!--                                    删除-->
<!--                                </a-button>-->
<!--                            </a-popconfirm>-->
<!--                        </a-space>-->
<!--                    </template>-->
                </a-table>
                <!--                渲染数据e              -->
            </a-layout-content>
        </a-layout>
    </a-layout-content>

    <a-modal title="电子书表单" v-model:visible="modelVisible"
             :confirm-loading="modelLoading"
              @ok="handleModelOk">
           <a-form :model="ebook" >
               <a-form-item label="封面">
                   <a-input v-model:value="ebook.cover" />
               </a-form-item>
               <a-form-item label="名称">
                   <a-input v-model:value="ebook.name" />
               </a-form-item>
               <a-form-item label="分类">
                   <a-cascader
                           v-model:value="categoryIds"
                           :options="level1"
                           :field-names="{ label: 'name', value: 'id', children: 'children' }"
                           placeholder="请选择分类" />
               </a-form-item>
               <a-form-item label="描述">
                   <a-input v-model:value="ebook.description" type="textarea" />
               </a-form-item>
           </a-form>
    </a-modal>
</template>
<script lang="ts">

    import {defineComponent, onMounted, ref} from 'vue';
    import axios from 'axios';
    import  { message } from  'ant-design-vue';
    import {Tool} from "@/util/tool";

    export default defineComponent({
        name: 'AdminEbook',
        setup() { //入口
            console.log("setup");
            //存储请求时要 过滤参数数据
            const param = ref();
            param.value = {};
            //声明图书动态数据
            const ebooks = ref();
            //图书表格对应列
            const columns = [
                {
                    title: '封面',
                    dataIndex: 'cover',
                    slots: { customRender: 'cover' }
                },
                {
                    title: '名称',
                    dataIndex: 'name'
                },
                {
                    title: '分类',
                    slots: { customRender: 'category' }
                },
                {
                    title: '文档数',
                    dataIndex: 'docCount'
                },
                {
                    title: '阅读数',
                    dataIndex: 'viewCount'
                },
                {
                    title: '点赞数',
                    dataIndex: 'voteCount'
                },
                {
                    title: '操作',
                    key: 'action',//没有的数据加key
                    slots: { customRender: 'action' }
                }
            ];

            //图书表格分页与加载
            const pagination = ref({  //返回给组件的数据
                current: 1,
                pageSize: 10,
                total: 0
            });
            const loading = ref(false); //页面加载

            //图书表单
            const ebook=ref();
            const modelLoading = ref<boolean>(false);
            const modelVisible = ref<boolean>(false);

            //图书分类选择
            const level1 = ref();
            const categoryIds=ref();
            var categorys : any;//保存分类值表格显示用

            //表单保存
            const handleModelOk = () => {
                modelLoading.value = true;
                ebook.value.category1Id=categoryIds.value[0];
                ebook.value.category2Id=categoryIds.value[1];
                axios.post("/ebook/save", ebook.value).then((response) => {
                    const data = response.data;
                    if (data.success){

                        modelLoading.value = false;
                        modelVisible.value = false;

                        handleQuery({ //点击后查询
                            page: pagination.value.current,
                            size: pagination.value.pageSize
                        });
                    }else{
                        modelLoading.value = false;
                        message.error(data.message)
                    }
                });
            };
            //编辑
            const edit = (record :any) => {
                modelVisible.value = true;
                ebook.value =Tool.copy(record);
                categoryIds.value=[ ebook.value.category1Id,ebook.value.category2Id]
            };
            //新增
            const add = () => {
                modelVisible.value = true;
                ebook.value ={};
            };
            //删除
            const Bdelete = (record :any) => {
                axios.delete("/ebook/delete/"+record.id).then((response) => {
                    const data = response.data;
                    if (data.success){
                        handleQuery({ //点击后查询
                            page: pagination.value.current,
                            size: pagination.value.pageSize
                        });
                    }
                });
            };
            //返回分类名
            const getCategoryName = (cid :number)=>{
                var result ="";
                categorys.forEach((item :any )=>{
                    if(item.id==cid){
                        result = item.name;
                    }
               })
                return result;
            };


            /**
             * 分类数据查询
             **/
            const handleQueryCategory = () => {
                loading.value = true;
                axios.get("/category/all").then((response) => {
                    loading.value = false;
                    const data = response.data;
                    if (data.success){
                         categorys = data.content; //
                        level1.value=[];
                        level1.value=Tool.array2Tree(categorys,0)

                        //分类数据渲染好后，再渲染可能拿不到 分类数据
                        handleQuery({ //初始化数据
                            page: 1,
                            size: pagination.value.pageSize,
                        });

                    }else{
                        message.error(data.message);
                    }
                });
            };

            /**
             * 数据查询
             **/
            const handleQuery = (params: any) => {
                loading.value = true;

                axios.get("/ebook/list", {
                    params: {
                        page: params.page, //请求的页数
                        size: params.size, //请求的多少个数据
                        name: param.value.name //过滤参数
                    }
                }).then((response) => {
                    loading.value = false;
                    const data = response.data;
                    if (data.success){
                        ebooks.value = data.content.list; //
                        // 重置分页按钮
                        pagination.value.current = params.page;//当前页
                        pagination.value.total = data.content.total;//总页数
                    }else{
                       message.error(data.message);
                    }
                });
            };

            /**
             * 表格点击页码时触发
             */
            const handleTableChange = (pagination: any) => {
                console.log("分页参数都：" + pagination);
                handleQuery({ //点击后查询
                    page: pagination.current,
                    size: pagination.pageSize
                });
            };

            onMounted(() => {
                handleQueryCategory();

            });

            return {
                columns,
                pagination,
                ebooks,
                loading,
                handleTableChange,
                modelLoading,
                modelVisible,
                edit,
                Bdelete,
                add,
                handleModelOk,
                ebook,
                handleQuery,
                param,
                level1,
                categoryIds,
                getCategoryName
            };
        },
    });
</script>
